<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="template/item :: app(~{::title}, ~{}, ~{}, ~{::div.container-item}, ~{::script})">
<head>
    <title>Grant</title>
</head>
<body>
    <div class="container-item">
        <el-row :gutter="page.gutter">
            <el-col :span="8">
                <el-card class="min-h-3">
                    <el-table
                        ref="users"
                        :data="vo.users"
                        fit
                        stripe
                        border
                        highlight-current-row
                        @row-click="handleUserRowClick"
                        :max-height="600">
                        <el-table-column type="index" width="50" align="center"></el-table-column>
                        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
                        <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="min-h-3">
                    <el-table
                        ref="roles"
                        :data="vo.roles"
                        fit
                        stripe
                        border
                        highlight-current-row
                        @select="handleSelect"
                        @select-all="handleSelect"
                        @row-click="handleRoleRowClick"
                        :max-height="600">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column prop="name" label="名称" align="center"></el-table-column>
                        <el-table-column prop="code" label="编码" align="center"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="min-h-3">
                    <el-tree
                        ref="menus"
                        :data="vo.menus"
                        :props="{ label: 'name' }"
                        show-checkbox
                        node-key="id"
                        default-expand-all
                        highlight-current
                        @check="handleCheck">
                    </el-tree>
                </el-card>
            </el-col>
        </el-row>
    </div>

    <script type="text/javascript">
        Factory.Vue.build({
            data() {
                return {
                    axios: Factory.Request,
                    api: '/api/grant',
                    page: {
                        gutter: 15
                    },
                    vo: {
                        users: [],
                        roles: [],
                        menus: []
                    },
                    selected: {
                        user: null,
                        role: null
                    }
                }
            },
            created() {
                this.axios.get(this.api).then(data => this.vo = data);
            },
            methods: {
                handleUserRowClick({ id }) {
                    if (this.selected.user === id) return;

                    this.selected.user = id;
                    const roles = this.$refs.roles;
                    roles.clearSelection();

                    this.axios.get(`${this.api}/role/${id}`).then(data => data.forEach(it => {
                        const role = this.vo.roles.find(r => r.id === it.rid);
                        role && roles.toggleRowSelection(role, true);
                    }));
                },
                handleSelect(selection) {
                    const uid = this.selected.user;
                    uid && this.axios.put(`${this.api}/role/${uid}`, selection.map(it => ({ uid, rid: it.id })));
                },
                handleRoleRowClick({ id }) {
                    if (this.selected.role === id) return;

                    this.selected.role = id;
                    const menus = this.$refs.menus;
                    menus.setCheckedKeys([]);

                    this.axios.get(`${this.api}/menu/${id}`).then(data => {
                        const keys = data.map(it => it.mid).filter(m => {
                            const node = menus.getNode(m);
                            return node && node.isLeaf;
                        });
                        menus.setCheckedKeys(keys);
                    });
                },
                handleCheck(data, { checkedKeys: k1, halfCheckedKeys: k2 }) {
                    const rid = this.selected.role;
                    rid && this.axios.put(`${this.api}/menu/${rid}`, Array.of(...k1, ...k2).map(mid => ({ rid, mid })));
                }
            }
        });
    </script>
</body>
</html>
